import { useEffect, useState } from 'react'
import { Row, Col, Card, Input, Select, Pagination } from 'antd'
import { useNavigate } from 'react-router-dom'
import { courseService } from '../../services'

const { Search } = Input
const { Option } = Select

const CourseList = () => {
  const navigate = useNavigate()
  const [courses, setCourses] = useState([])
  const [loading, setLoading] = useState(false)
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 12,
    total: 0,
  })
  const [filters, setFilters] = useState({
    search: '',
    level: '',
    category: '',
  })

  useEffect(() => {
    loadCourses()
  }, [pagination.page, filters])

  const loadCourses = async () => {
    try {
      setLoading(true)
      const params = {
        page: pagination.page,
        limit: pagination.limit,
        ...filters,
      }
      const response: any = await courseService.getCourses(params)
      if (response.code === 200) {
        setCourses(response.data.courses)
        setPagination({
          ...pagination,
          total: response.data.pagination.total,
        })
      }
    } catch (error) {
      console.error('Load courses error:', error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '24px' }}>
      <div style={{ marginBottom: '24px', display: 'flex', gap: '16px' }}>
        <Search
          placeholder="搜索课程"
          allowClear
          onSearch={(value) => setFilters({ ...filters, search: value })}
          style={{ width: 300 }}
        />
        <Select
          placeholder="难度"
          allowClear
          style={{ width: 120 }}
          onChange={(value) => setFilters({ ...filters, level: value || '' })}
        >
          <Option value="beginner">初级</Option>
          <Option value="intermediate">中级</Option>
          <Option value="advanced">高级</Option>
        </Select>
      </div>

      <Row gutter={[24, 24]}>
        {courses.map((course: any) => (
          <Col key={course.id} xs={24} sm={12} md={8} lg={6}>
            <Card
              hoverable
              loading={loading}
              cover={
                <div style={{
                  height: '160px',
                  background: '#f0f2f5',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center'
                }}>
                  {course.cover ? (
                    <img src={course.cover} alt={course.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  ) : (
                    <span>课程封面</span>
                  )}
                </div>
              }
              onClick={() => navigate(`/courses/${course.id}`)}
            >
              <Card.Meta
                title={course.title}
                description={
                  <div>
                    <div style={{ color: '#ff4d4f', fontSize: '18px', fontWeight: 'bold' }}>
                      ¥{course.price}
                    </div>
                    <div style={{ marginTop: '8px', color: '#999' }}>
                      {course.studentCount}人已学习
                    </div>
                  </div>
                }
              />
            </Card>
          </Col>
        ))}
      </Row>

      <div style={{ marginTop: '32px', textAlign: 'center' }}>
        <Pagination
          current={pagination.page}
          pageSize={pagination.limit}
          total={pagination.total}
          onChange={(page) => setPagination({ ...pagination, page })}
        />
      </div>
    </div>
  )
}

export default CourseList
